<template>
    <div class='container'>
        <el-row style='height: 100%; '>
            <el-col :span='8' style='height: 100%; '>
                <!--   -->
                <div style='display: flex; height: 65%'>
                    <el-card class='box-card' style='flex: 1'>
                        <div slot='header' class='clearfix'>
                            <span>目标</span>
                        </div>
                        <el-tree
                            :data='targetData'
                            :props="{children: 'children',label: 'text'}"
                            default-expand-all
                            @node-drag-end='nodeDragEnd'
                            style='height: 500px; background-color: #d9d9d9;overflow-y: auto'
                        >
                            <template slot-scope='{node, data}'>
                                <div draggable style='width: 100%;color: #000;' @dragend='nodeDragEnd(node, data, $event)'>{{ data.text }}
                                </div>
                            </template>
                        </el-tree>
                    </el-card>
                    <el-divider direction='vertical'></el-divider>
                    <el-card class='box-card' style='flex: 1'>
                        <div slot='header' class='clearfix'>
                            <span>准则</span>
                        </div>
                        <el-tree
                            :data='zzData'
                            :props="{children: 'children',label: 'text'}"
                            default-expand-all

                            @node-drag-end='zzNodeDragEnd'
                            style='height: 500px; background-color: #d9d9d9;overflow-y: auto'
                        >
                            <template slot-scope='{node, data}'>
                                <div draggable style='width: 100%;color: #000;' @dragend='zzNodeDragEnd(node, data, $event)'>{{ data.text }}
                                </div>
                            </template>
                        </el-tree>
                    </el-card>
                </div>
                <!--  方案  -->
                <el-card class='fa-card'>
                    <div slot='header' class='clearfix'>
                        <span>方案</span>
                    </div>
                    <el-tree
                        :data='schemeData'
                        :props="{children: 'children',label: 'text'}"
                        default-expand-all
                        @node-click='nodeClick'
                        @node-drag-end='schemeDragEnd'
                        style='height: 100%; background-color: #d9d9d9'
                    >
                        <template slot-scope='{node, data}'>
                            <div draggable style='width: 100%; color: #000;' @dragend='dragend(node, data, $event)'>{{ data.text }}
                            </div>
                        </template>
                    </el-tree>
                </el-card>
            </el-col>
            <el-col ref='elCol' id='elCol' ondragover="javascript:allowDrop(event)"  :span='16' style='height: 100%; border: 1px dashed #8c939d;'>
                <RelationGraph @sx='sx' :jmData='jmData' :rootId='rootNode' :schemeLinks='schemeLinks' v-if='isShowJsMind'  />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import RelationGraph from './RelationGraph';
import { tranListToTreeData } from '@/utils';
export default {
    components: { RelationGraph },
    data() {
        return {
            schemeLinks: [],
            jmData: null,
            rootNode: {},
            childrenData: [],
            isShowJsMind: false,
            targetData: [
                { id: '22', text: 'F-22战斗机' },
                { id: 'tjtj', text: 'F-35闪电战斗机' },
                { id: '3tyjtj', text: '歼-20战斗机' },
                { id: 'tyj4tj', text: '苏-35战斗机' },
                { id: 'tyjt5', text: 'F-18战斗机' }
            ],
            zzData: [
                { id: '1', text: '机动性', xh: '0' },
                { id: '2', text: '敏捷性', xh: '1' },
                { id: '3', text: '超音速巡航', xh: '1' },
                { id: '4', text: '加速性能', xh: '1' },
                { id: '5', text: '生存力', xh: '0' },
                { id: '6', text: '雷达隐身性', xh: '5' },
                { id: '7', text: '红外因素性', xh: '5' },
                { id: '8', text: '格斗火力', xh: '5' }
            ],
            schemeData: [
                { id: '111', text: '计划方案111' },
                { id: '222', text: '计划方案222' },
                { id: '333', text: '计划方案333' },
                { id: '444', text: '计划方案444' }
            ]
        };
    },
    created() {
        // this.getMbList()
        this.getZzList();
        // this.getPrjList()
    },
    mounted() {
        window.allowDrop = this.allowDrop
    },
    methods: {
        nodeClick(data, node, e) {
            console.log(data, node, e);

        },
        allowDrop(e) {
            e.preventDefault();
        },
        dragend(node, data, e) {
            console.log(node, data, e);
            console.log(this.jmData);
            if (!this.jmData || !this.jmData.children || this.jmData.children.length < 1) return this.$message.warning('请先选择准则！');
            this.schemeLinks.push(data);
            this.jmData.children.push(data);
            this.isShowJsMind = false;
            this.$nextTick(() => {
                this.isShowJsMind = true;
            });
        },
        sx(id, keys) {
            this.schemeData.forEach(item => {
                if (item.id == id) {
                    item['keys'] = keys;
                }
            });
            this.isShowJsMind = false;
            this.$nextTick(() => {
                this.isShowJsMind = true;
            });
        },
        // 目标
        getMbList() {
            getTargetListAPI().then(res => {
                console.log(res);
                this.targetData = tranListToTreeData(res.data, 'id', 'name');
            });
        },
        // 准则
        getZzList() {
            this.zzData = tranListToTreeData(this.zzData, 'id', 'xh');

        },
        // 方案
        getPrjList() {
            getPrjListAPI().then(res => {
                console.log(res);
            });
        },
        // 目标拖拽
        nodeDragEnd(beforNode, alterNode, event) {
            // console.log(this.$refs.elCol);
            // document.getElementById('elCol').ondragover = function() {}
            console.log(beforNode, alterNode, event);
            // event.preventDefault()
            beforNode.data.children = [];
            beforNode.data.color = 'red';
            this.jmData = {};
            this.rootNode = beforNode.data.id;
            let obj = JSON.parse(JSON.stringify(beforNode.data));
            this.jmData = { ...obj };
            this.isShowJsMind = false;
            this.$nextTick(() => {
                this.isShowJsMind = true;
            });
        },
        // 准则拖拽
        zzNodeDragEnd(beforNode, alterNode, position, event) {
            if (this.jmData == null) return this.$message.warning('请先选择目标！');
            let index = this.jmData.children.findIndex(item => item.id == beforNode.data.id)
            if (index !== -1) return this.$message.warning('已存在此准则！');
            beforNode.data['xh'] = this.jmData.id;
            this.jmData.children.push(beforNode.data);
            this.isShowJsMind = false;
            this.$nextTick(() => {
                this.isShowJsMind = true;
            });
        },
        // 方案拖拽
        schemeDragEnd(beforNode) {
            if (this.jmData || !this.jmData.children || this.jmData.children.length < 1) return this.$message.warning('请先选择准则！');
            this.schemeLinks.push(beforNode.data);
            this.jmData.children.push(beforNode.data);
            this.isShowJsMind = false;
            this.$nextTick(() => {
                this.isShowJsMind = true;
            });
        },
        // 下拉树样式
        renderContent(h, { node, data, store }) {
            return (
                <span style='width: 100%; padding:0 3px; font-size: 17px; color: #000'>
             <span>{node.label}</span>
          </span>
            );
        }
    }
};
</script>

<style scoped>
::v-deep .el-tree-node__expand-icon {
    color: #000000;
    font-size: 16px;
}

.container {
    position: relative;
    width: calc(100% - 40px);
    height: calc(100% - 50px);
    margin: 0 20px;
    overflow-y: auto;
}

.box-card {
    height: 100%;
    background-color: #d9d9d9;
}

.fa-card {
    margin-top: 15px;
    height: 33%;
    background-color: #d9d9d9;
}
</style>